<script lang="ts">
// import { ref } from 'vue'
import LogicFlow from '@logicflow/core'
import {
  Snapshot,
  Control,
  Menu,
  SelectionSelect,
} from '@logicflow/extension';
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'
import BeautifyFlowExtension from './beautifyElement/index'
import Dagre from './beautifyElement/tools/dagre'

export default {
  mounted() {
    this.lf = new LogicFlow({
      container: this.$refs.container,
      width: 1200,
      height: 1000,
      grid: {
        visible: false,
        size: 10,
      },
      keyboard: {
        enabled: true
      },
      // keyboard: true,
      plugins: [
        Snapshot,
        Control,
        Menu,
        SelectionSelect,
        BeautifyFlowExtension,
        Dagre,
      ]
    })
    this.lf.extension.control.addItem({
      iconClass: "beautify-flow",
      title: "",
      text: "一键美化",
      onClick: (lf, ev) => {
        lf.extension.dagre && this.lf.extension.dagre.layout({
          nodesep: 20,
          ranksep: 20,
        });
      }
    });
    this.lf.render()
  },
  methods: {
  }
}
</script>

<template>
  <div class="beautify-chart">
    <div ref="container" class="container"></div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.bpmn-example-container {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.pattern {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 60px;
  display: flex;
  flex-direction: column;
  z-index: 111;
  align-items: center;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  padding: 10px 0;
  font-size: 12px;
  color: #676768;
  user-select: none;
}
.pattern-selection {
  width: 36px;
  height: 36px;
  background: url() center center no-repeat;
  cursor: pointer;
  opacity: 0.99;
}
.pattern-start {
  width: 36px;
  height: 36px;
  background: url() center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-end {
  width: 36px;
  height: 36px;
  background: url() center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-user {
  width: 36px;
  height: 36px;
  background: url() center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-condition {
  width: 36px;
  height: 36px;
  background: url() center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.graph-io {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
  background:rgba(255,255,255,0.8);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  padding: 10px;
  display: flex;
}
.graph-io>span {
  margin: 0 5px;
  cursor: pointer;
}
#upload-xml {
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}
.upload {
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.upload::-webkit-file-upload-button{
  cursor: pointer;
}
</style>
